<template>
  <div>
    <app-container>
      <generate-form ref="generateForm" :data="jsonData" :remote="remoteFuncs" :value="editData" />
      <div class="generate-block">
        <el-button type="primary" @click="handleSubmit">提交</el-button>
        <el-button type="primary">重置</el-button>
      </div>
    </app-container>
  </div>
</template>
<script>
import GenerateForm from '@/components/CreateForm/GenerateForm'
import '@/components/CreateForm/styles/FormCreate.css'
import { getCodeList } from '@/api/codelist'
import GenerateTable from '@/components/CreateTable/GenerateTable'
export default {
  components: {
    GenerateForm,
    GenerateTable
  },
  data: function() {
    return {
      jsonData: { 'list': [{ 'type': 'grid', 'name': '栅格布局', 'icon': 'th', 'columns': [{ 'span': 6, 'list': [{ 'type': 'input', 'name': '贷款借据号', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': true, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'readonly': false, 'disabled': false, 'clearable': false, 'remoteFunc': 'func_1542952973000_96484' }, 'key': '1542952973000_96484', 'model': 'input_1542952973000_96484', 'rules': [{ 'type': 'string', 'message': '贷款借据号格式不正确' }, { 'required': true, 'message': '贷款借据号必须填写' }] }] }, { 'span': 6, 'list': [{ 'type': 'input', 'name': '贷款账号', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'readonly': false, 'disabled': false, 'clearable': false, 'remoteFunc': 'func_1542952987000_5033' }, 'key': '1542952987000_5033', 'model': 'input_1542952987000_5033', 'rules': [{ 'type': 'string', 'message': '贷款借据号格式不正确' }] }] }, { 'span': 6, 'list': [{ 'type': 'input', 'name': '合同编号', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'readonly': false, 'disabled': true, 'clearable': false, 'remoteFunc': 'func_1542952993000_88905' }, 'key': '1542952993000_88905', 'model': 'input_1542952993000_88905', 'rules': [] }] }, { 'span': 6, 'list': [{ 'type': 'select', 'name': '货币代码', 'icon': 'regular/caret-square-down', 'options': { 'defaultValue': '', 'multiple': false, 'disabled': false, 'clearable': false, 'placeholder': '', 'required': false, 'showLabel': false, 'width': '100%', 'options': [{ 'value': '下拉框1' }, { 'value': '下拉框2' }, { 'value': '下拉框3' }], 'remote': true, 'remoteOptions': [], 'props': { 'value': 'value', 'label': 'label' }, 'remoteFunc': 'Currency' }, 'key': '1542953002000_97400', 'model': 'select_1542953002000_97400', 'rules': [] }] }], 'options': { 'gutter': 0, 'justify': 'start', 'align': 'top', 'remoteFunc': 'func_1542952967000_24411' }, 'key': '1542952967000_24411', 'model': 'grid_1542952967000_24411', 'rules': [] }, { 'type': 'grid', 'name': '栅格布局', 'icon': 'th', 'columns': [{ 'span': 6, 'list': [{ 'type': 'input', 'name': '公司代码', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'readonly': false, 'disabled': true, 'clearable': false, 'remoteFunc': 'func_1542953024000_4129' }, 'key': '1542953024000_4129', 'model': 'input_1542953024000_4129', 'rules': [{ 'type': 'string', 'message': '单行文本格式不正确' }] }] }, { 'span': 6, 'list': [{ 'type': 'input', 'name': '成员公司名称', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'readonly': false, 'disabled': true, 'clearable': false, 'remoteFunc': 'func_1542953033000_62924' }, 'key': '1542953033000_62924', 'model': 'input_1542953033000_62924', 'rules': [] }] }, { 'span': 6, 'list': [{ 'type': 'select', 'name': '成员公司名称', 'icon': 'regular/caret-square-down', 'options': { 'defaultValue': '', 'multiple': false, 'disabled': false, 'clearable': false, 'placeholder': '', 'required': false, 'showLabel': false, 'width': '100%', 'options': [{ 'value': '下拉框1' }, { 'value': '下拉框2' }, { 'value': '下拉框3' }], 'remote': true, 'remoteOptions': [], 'props': { 'value': 'value', 'label': 'label' }, 'remoteFunc': 'Name ' }, 'key': '1542953043000_80437', 'model': 'select_1542953043000_80437', 'rules': [] }] }, { 'span': 6, 'list': [{ 'type': 'input', 'name': '贷款期限', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': true, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'readonly': false, 'disabled': false, 'clearable': false, 'remoteFunc': 'func_1542953084000_90906' }, 'key': '1542953084000_90906', 'model': 'input_1542953084000_90906', 'rules': [{ 'type': 'string', 'message': '单行文本格式不正确' }, { 'required': true, 'message': '贷款期限必须填写' }] }] }], 'options': { 'gutter': 0, 'justify': 'start', 'align': 'top', 'remoteFunc': 'func_1542953014000_85651' }, 'key': '1542953014000_85651', 'model': 'grid_1542953014000_85651', 'rules': [] }, { 'type': 'grid', 'name': '栅格布局', 'icon': 'th', 'columns': [{ 'span': 6, 'list': [{ 'type': 'date', 'name': '起息日期', 'icon': 'regular/calendar-alt', 'options': { 'defaultValue': '', 'readonly': false, 'disabled': true, 'editable': true, 'clearable': true, 'placeholder': '', 'startPlaceholder': '', 'endPlaceholder': '', 'type': 'date', 'format': 'yyyy-MM-dd', 'timestamp': false, 'required': false, 'width': '100%', 'remoteFunc': 'func_1542953128000_20119' }, 'key': '1542953128000_20119', 'model': 'date_1542953128000_20119', 'rules': [] }] }, { 'span': 6, 'list': [{ 'type': 'date', 'name': '到期日期', 'icon': 'regular/calendar-alt', 'options': { 'defaultValue': '', 'readonly': false, 'disabled': true, 'editable': true, 'clearable': true, 'placeholder': '', 'startPlaceholder': '', 'endPlaceholder': '', 'type': 'date', 'format': 'yyyy-MM-dd', 'timestamp': false, 'required': false, 'width': '100%', 'remoteFunc': 'func_1542953139000_79668' }, 'key': '1542953139000_79668', 'model': 'date_1542953139000_79668', 'rules': [] }] }, { 'span': 6, 'list': [{ 'type': 'input', 'name': '正常本金', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'readonly': false, 'disabled': true, 'clearable': false, 'remoteFunc': 'func_1542953149000_15138' }, 'key': '1542953149000_15138', 'model': 'input_1542953149000_15138', 'rules': [{ 'type': 'string', 'message': '正常本金格式不正确' }] }] }, { 'span': 6, 'list': [{ 'type': 'input', 'name': '逾期本金', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'readonly': false, 'disabled': true, 'clearable': false, 'remoteFunc': 'func_1542953158000_21763' }, 'key': '1542953158000_21763', 'model': 'input_1542953158000_21763', 'rules': [{ 'type': 'string', 'message': '单行文本格式不正确' }] }] }], 'options': { 'gutter': 0, 'justify': 'start', 'align': 'top', 'remoteFunc': 'func_1542953015000_78282' }, 'key': '1542953015000_78282', 'model': 'grid_1542953015000_78282', 'rules': [] }, { 'type': 'grid', 'name': '栅格布局', 'icon': 'th', 'columns': [{ 'span': 6, 'list': [{ 'type': 'input', 'name': '呆滞本金', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'readonly': false, 'disabled': true, 'clearable': false, 'remoteFunc': 'func_1542953172000_77914' }, 'key': '1542953172000_77914', 'model': 'input_1542953172000_77914', 'rules': [] }] }, { 'span': 6, 'list': [{ 'type': 'input', 'name': '呆账本金', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'readonly': false, 'disabled': true, 'clearable': false, 'remoteFunc': 'func_1542953180000_90250' }, 'key': '1542953180000_90250', 'model': 'input_1542953180000_90250', 'rules': [] }] }, { 'span': 6, 'list': [{ 'type': 'input', 'name': '应收应计利息', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'readonly': false, 'disabled': true, 'clearable': false, 'remoteFunc': 'func_1542953188000_16333' }, 'key': '1542953188000_16333', 'model': 'input_1542953188000_16333', 'rules': [] }] }, { 'span': 6, 'list': [{ 'type': 'input', 'name': '催收应计利息', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'readonly': false, 'disabled': true, 'clearable': false, 'remoteFunc': 'func_1542953213000_9287' }, 'key': '1542953213000_9287', 'model': 'input_1542953213000_9287', 'rules': [] }] }], 'options': { 'gutter': 0, 'justify': 'start', 'align': 'top', 'remoteFunc': 'func_1542953016000_29275' }, 'key': '1542953016000_29275', 'model': 'grid_1542953016000_29275', 'rules': [] }, { 'type': 'grid', 'name': '栅格布局', 'icon': 'th', 'columns': [{ 'span': 6, 'list': [{ 'type': 'input', 'name': '应收欠息', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'readonly': false, 'disabled': true, 'clearable': false, 'remoteFunc': 'func_1542953232000_86551' }, 'key': '1542953232000_86551', 'model': 'input_1542953232000_86551', 'rules': [{ 'type': 'string', 'message': '应收欠息格式不正确' }] }] }, { 'span': 6, 'list': [{ 'type': 'input', 'name': '催收欠息', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'readonly': false, 'disabled': true, 'clearable': false, 'remoteFunc': 'func_1542953238000_30492' }, 'key': '1542953238000_30492', 'model': 'input_1542953238000_30492', 'rules': [{ 'type': 'string', 'message': '单行文本格式不正确' }] }] }, { 'span': 6, 'list': [{ 'type': 'input', 'name': '应收应计罚息', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'readonly': false, 'disabled': true, 'clearable': false, 'remoteFunc': 'func_1542953258000_26248' }, 'key': '1542953258000_26248', 'model': 'input_1542953258000_26248', 'rules': [] }] }, { 'span': 6, 'list': [{ 'type': 'input', 'name': '催收应计罚息', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'readonly': false, 'disabled': true, 'clearable': false, 'remoteFunc': 'func_1542953268000_59042' }, 'key': '1542953268000_59042', 'model': 'input_1542953268000_59042', 'rules': [] }] }], 'options': { 'gutter': 0, 'justify': 'start', 'align': 'top', 'remoteFunc': 'func_1542953017000_33149' }, 'key': '1542953017000_33149', 'model': 'grid_1542953017000_33149', 'rules': [] }, { 'type': 'grid', 'name': '栅格布局', 'icon': 'th', 'columns': [{ 'span': 6, 'list': [{ 'type': 'input', 'name': '应收罚息', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'readonly': false, 'disabled': true, 'clearable': false, 'remoteFunc': 'func_1542953275000_67027' }, 'key': '1542953275000_67027', 'model': 'input_1542953275000_67027', 'rules': [] }] }, { 'span': 6, 'list': [{ 'type': 'input', 'name': '催收罚息', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'readonly': false, 'disabled': true, 'clearable': false, 'remoteFunc': 'func_1542953282000_10119' }, 'key': '1542953282000_10119', 'model': 'input_1542953282000_10119', 'rules': [] }] }, { 'span': 6, 'list': [{ 'type': 'input', 'name': '应计复息', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'readonly': false, 'disabled': true, 'clearable': false, 'remoteFunc': 'func_1542953289000_42955' }, 'key': '1542953289000_42955', 'model': 'input_1542953289000_42955', 'rules': [] }] }, { 'span': 6, 'list': [{ 'type': 'input', 'name': '复息', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'readonly': false, 'disabled': true, 'clearable': false, 'remoteFunc': 'func_1542953296000_74760' }, 'key': '1542953296000_74760', 'model': 'input_1542953296000_74760', 'rules': [] }] }], 'options': { 'gutter': 0, 'justify': 'start', 'align': 'top', 'remoteFunc': 'func_1542953223000_17181' }, 'key': '1542953223000_17181', 'model': 'grid_1542953223000_17181', 'rules': [] }, { 'type': 'grid', 'name': '栅格布局', 'icon': 'th', 'columns': [{ 'span': 6, 'list': [{ 'type': 'input', 'name': '本金合计', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'readonly': false, 'disabled': true, 'clearable': false, 'remoteFunc': 'func_1542953309000_57380' }, 'key': '1542953309000_57380', 'model': 'input_1542953309000_57380', 'rules': [] }] }, { 'span': 6, 'list': [{ 'type': 'input', 'name': '利息合计', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'readonly': false, 'disabled': true, 'clearable': false, 'remoteFunc': 'func_1542953318000_94748' }, 'key': '1542953318000_94748', 'model': 'input_1542953318000_94748', 'rules': [] }] }, { 'span': 6, 'list': [] }, { 'span': 6, 'list': [] }], 'options': { 'gutter': 0, 'justify': 'start', 'align': 'top', 'remoteFunc': 'func_1542953224000_36370' }, 'key': '1542953224000_36370', 'model': 'grid_1542953224000_36370', 'rules': [] }], 'config': { 'labelWidth': 100, 'labelPosition': 'right' }, 'table': { 'showRemove': false, 'showIndexCol': false, 'showEdit': false, 'showExport': false, 'showAdd': false, 'stripe': true, 'border': false }},
      editData: {},
      values: {},
      remoteFuncs: {

        Currency(resolve) {
          // 货币代码 select_1542953002000_97400
          // 获取到远端数据后执行回调函数
          // resolve(data)
          getCodeList('货币代码').then(response => { resolve(response.data) })
        },

        Name(resolve) {
          // 成员公司名称 select_1542953043000_80437
          // 获取到远端数据后执行回调函数
          // resolve(data)
          getCodeList('成员公司名称').then(response => { resolve(response.data) })
        }

      }
    }
  },
  methods: {
    handleSubmit() {
      this.$refs.generateForm.getData().then(data => {
        // 数据校验成功
        // data 为获取的表单数据
      }).catch(e => {
        // 数据校验失败
      })
    }
  }
}
</script>
